<template>
	<el-tabs v-model="activeTab" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
		<el-tab-pane v-for="item in tabsMenuList" :key="item.path" :label="item.title" :name="item.path" :closable="item.close">
			<template #label>
				<el-icon class="tabs-icon" v-if="item.icon && themeConfig.tabsIcon">
					<component :is="item.icon"></component>
				</el-icon>
				{{ item.title }}
			</template>
		</el-tab-pane>
	</el-tabs>
</template>

<script setup lang="ts" name="normalTab">
import { computed } from 'vue'
import { TabsPaneContext } from 'element-plus'

interface TabProps {
	modelValue: string
	tabsMenuList: any[]
	themeConfig: any
}
const props = defineProps<TabProps>()

type EmitProps = {
	(e: 'update:modelValue', val: string): void
	(e: 'tab-click', path: string): void
	(e: 'tab-remove', path: string): void
}
const emit = defineEmits<EmitProps>()

const activeTab = computed({
	get() {
		return props.modelValue
	},
	set(val: string) {
		emit('update:modelValue', val)
	}
})

// Tab Click
const tabClick = (tabItem: TabsPaneContext) => {
	emit('tab-click', tabItem.props.name as string)
}

// Remove Tab
const tabRemove = (path: string) => {
	emit('tab-remove', path)
}
</script>
